<template>
  <section id="footer">
    <div class="footer-bg"></div>
    <h1>footer</h1>
    
    <div>
      <logo />
    </div>

  </section>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElHeader, ElMain, ElFooter, ElButton } from 'element-plus';
import { NavBar, Tabbar, TabbarItem, Button as VanButton } from 'vant';
import { updateLayout } from '../utils/layoutUtils';
import logo from './logo.vue'
const isPC = ref(false);
const isIPad = ref(false);

onMounted(() => {
  updateLayout(isPC, isIPad);
  window.addEventListener('resize', () => updateLayout(isPC, isIPad));
});

</script>

<style lang="scss" scoped>
  #footer{
    // height: 160px;
    color: #fff;
    background-color: #006b5f;
    position: relative;
    .footer-bg{
      width: 100%;
      aspect-ratio: 1/0.115;
      overflow: hidden;
      background-color: #edf6f5;
      background-size: 100%;
      background-repeat: no-repeat;
      background-image: url('../assets/images/footer-bg.png');

    }
  }
.pc-layout {
  height: 300px;
  background-color: #927d14;
}

.ipad-layout, .mobile-layout {
  height: 300px;
  background-color: #2d90a6;
}

@media (min-width: 1024px) {
  .pc-layout {
    display: block;
  }
  .ipad-layout, .mobile-layout {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .ipad-layout {
    display: block;
  }
  .pc-layout, .mobile-layout {
    display: none;
  }
}

@media (max-width: 767px) {
  .mobile-layout {
    display: block;
  }
  .pc-layout, .ipad-layout {
    display: none;
  }
}
</style>